<template>
	<view class="container">
		<uni-nav-bar title="订单详情" left-icon="back" fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
		<view class="top">
			<view class="goingtopay status" v-if="orderInfo.status==0">
				<image class="goingimg" src="/static/static/images/goingtopay.png"></image>
				<view class="text">
					<view class="s">待付款</view>
					<view class="t">请于24小时内付款，超时订单将自动关闭</view>
				</view>
			</view>
			<view class="goingtopay status" v-if="orderInfo.status==1">
				<image class="goingimg" src="/static/static/images/payeding.png"></image>
				<view class="text">
					<view class="s">付款成功，等待卖家发货</view>
					<view class="t">{{orderInfo.createTime}}</view>
					<!-- <view class="t">{{orderInfo.paymentTime}}</view> -->
				</view>
			</view>
			<view class="goingtopay status" v-if="orderInfo.status==2">
				<image class="goingimg" src="/static/static/images/goingtopay.png"></image>
				<view class="text">
					<view class="s">卖家已发货</view>
					<view class="t">{{orderInfo.deliveryTime}}</view>
				</view>
			</view>
			<view>
				<view class="buysuccess status" v-if="orderInfo.status==3">
					<image class="buyimg" src="/static/static/images/buyseccess.png"></image>
					<view class="text">
						<view class="s">交易成功</view>
						<view class="t">{{orderInfo.receiveTime}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="top2">
			<view class="logistics item" v-if="orderInfo.status==2">
				<image class="top2img" src="/static/static/images/toyourhand.png"></image>
				<view class="t">
					<view class="s">商品正在配送中</view>
					<view class="time">{{orderInfo.receiveTime}}</view>
				</view>
			</view>
			<view class="logistics item" v-if="orderInfo.receiveTime">
				<image class="top2img" src="/static/static/images/toyourhand.png"></image>
				<view class="t">
					<view class="s">您已完成取件</view>
					<view class="time">{{orderInfo.receiveTime}}</view>
				</view>
			</view>
			<view style="width:670rpx;height:1rpx;margin-left:20rpx;background:#e5e4e5;" v-show="orderInfo.status >=2"></view>
			<view class="address item">
				<image class="top2img" src="/static/static/images/address.png"></image>
				<view class="h">
					<view class="person">
						<text class="name">{{orderInfo.receiverName}}</text>
						<text class="mobile">{{orderInfo.receiverPhone}}</text>
					</view>
					<view class="b">{{orderInfo.receiverProvince + orderInfo.receiverCity+ orderInfo.receiverRegion+ orderInfo.receiverDetailAddress}}</view>
				</view>
			</view>
			<view style="height:10rpx; width:100%;">
				<image class="address-bg" src="/static/static/images/addressbg.png"></image>
			</view>
		</view>
		<view class="goods-items">
			<navigator v-for="(item, index) in orderInfo.orderItemList" :key="index" class="item" :url="'/pages/goods/goods?id=' + item.productId">
				<view class="img">
					<image :src="item.productPic"></image>
				</view>
				<view class="info">
					<view class="t">
						<text class="name">{{item.productName}}</text>
						<text class="number">x{{item.productQuantity}}</text>
					</view>
					<!-- <view class="m">{{item.goods_specifition_name_value}}</view> -->
					<text class="attr">{{item.sku.sku}}</text>
					<view class="b">￥{{item.productPrice}}</view>
				</view>
			</navigator>
		</view>


		<view class="order-bottom">
			<view class="total">
				<view class="t">
					<text class="label">商品金额：</text>
					<text class="txt">￥{{orderInfo.totalAmount}}</text>
				</view>
				<view class="t">
					<text class="label">运费：</text>
					<text class="txt">￥{{orderInfo.freightAmount}}</text>
				</view>
				<view class="t">
					<text class="label">优惠券：</text>
					<text class="txt">￥{{orderInfo.couponAmount}}</text>
				</view>
			</view>
			<view style="height:1rpx;width:670rpx;background:#e5e4e5;"></view>
			<view class="pay-fee">
				<text class="label">共{{productsLength}}件商品，实付款：</text>
				<text class="txt">￥{{orderInfo.payAmount}}</text>
			</view>
		</view>

		<view class="order-info">
			<view class="item-a">订单详情</view>
			<view class="item-b">
				<view class="one">订单编号：</view>
				<view class="two">{{orderInfo.orderSn}}</view>
				<view class="copyorderSn" @tap.stop="copy(orderInfo.orderSn)">复制</view>
			</view>
			<view class="item-c">
				<text class="one">创建时间：</text>
				<text class="two">{{orderInfo.createTime}}</text>
			</view>
			<view class="item-c" v-show="orderInfo.status >=1">
				<text class="one">付款时间：</text>
				<text class="two">{{orderInfo.paymentTime}}</text>
			</view>
			<view class="item-c" v-show="orderInfo.status >=2">
				<text class="one"> 发货时间：</text>
				<text class="two">{{orderInfo.deliveryTime}}</text>
			</view>
			<view class="item-c" v-show="orderInfo.status >=3">
				<text class="one">收货时间：</text>
				<text class="two">{{orderInfo.receiveTime}}</text>
			</view>
		</view>
		<view style="width:100%;height:100rpx;"></view>
		<!-- <view class="r">
			<view class="btn" @tap="cancelOrder">取消订单</view>
			<view class="btn" @tap="updataAddress">取消订单</view>
			<view class="btn active" @tap="payOrder">去付款</view>
		</view> -->
		<view class="doing">
			<view style="height:1rpx; width:750rpx;background:#e5e4e5"></view>
			<view class="txt">
				<view class="btn l" @tap.stop="cancelopen" v-show="orderInfo.status < 1">取消订单</view>
				<view class="btn l" @tap.stop="updateAddress" v-show="orderInfo.status < 2">修改地址</view>
				<view class="btn t" @tap.stop="payOrder" v-show="orderInfo.status == 0">去付款</view>
				<view class="btn t" @tap.stop="confirm" v-show="orderInfo.status == 2">确认收货</view>
				<view class="btn 1" @tap.stop="deleteorder" v-show="orderInfo.status == 3 ">删除订单</view>
				<view class="btn 1" @tap.stop="deleteorder" v-show="orderInfo.status == 3 ">申请售后</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view style="background: #fff;">
				<view class="title">
					<view class="txt">取消原因</view>
					<image class="img" src="/static/static/images/icon_close.png" @tap.stop="popdown"></image>
				</view>
				<view style="height:1rpx; width:750rpx;background:#e5e4e5"></view>
				<view class="resons" v-for="(item, index) in statusType">
					<text class="txt">{{item.label}}</text>
					<view class="checkbox" @tap="checkedreson" :data-index="index" :data-reson="item.label">
						<image src="/static/static/images/check.png" v-if="!item.checkedStatus" style="height: 28rpx; width:28rpx"></image>
						<image src="/static/static/images/checked.png" v-if="item.checkedStatus" style="height: 28rpx; width:28rpx"></image>
					</view>
				</view>
				<view class="concan" @tap.stop="cancelOrder">确定取消</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	var util = require("../../../utils/util.js");
	var api = require("../../../config/api.js");
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

	export default {
		data() {
			return {
				orderId: 0,
				orderInfo: {},
				orderGoods: [],
				handleOption: {},
				orderItemList: [],
				productsLength: 0,
				checkeStatus: false,
				reson: '',
				statusType: [{
					checkedStatus: false,
					label: '规格数量拍错'
				}, {
					checkedStatus: false,
					label: '信息填写错误'
				}, {
					checkedStatus: false,
					label: '商品降价'
				}, {
					checkedStatus: false,
					label: '暂时不需要了'
				}, {
					checkedStatus: false,
					label: '其他'
				}],
			};
		},

		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniNavBar
		},
		props: {},
		onShareAppMessage: function(res) {
			return {
				title: '琅琊严选',
				path: '/pages/index/index'
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.id
			});
			this.getOrderDetail();
		},
		onReady: function() { // 页面渲染完成
		},
		onShow: function() { // 页面显示
		},
		onHide: function() { // 页面隐藏
		},
		onUnload: function() { // 页面关闭
		},
		methods: {
			goback(){
				uni.navigateBack();
			},
			getOrderDetail() {
				let that = this;
				util.request(api.OrderDetail, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno == 0) {
						console.log(res.data);
						that.setData({
							// orderItemList: res.data.orderItemList,
							orderInfo: res.data, // orderGoods: res.data.orderGoods,
							// handleOption: res.data.handleOption
							productsLength: res.data.orderItemList.length
						}); //that.payTimer();
					}
				});
			},
			cancelopen() {
				this.$refs.popup.open();
			},
			popdown() {
				this.$refs.popup.close();
			},
			checkedreson(e) {
				let reson = e.currentTarget.dataset.reson;
				let index = e.currentTarget.dataset.index;
				// console.log(index)
				// console.log(this.statusType[index])
				let status = this.statusType[index].checkedStatus;
				let that = this;
				if (!status) {
					that.statusType[index].checkedStatus = true
				} else {
					that.statusType[index].checkedStatus = false
				}
				if (that.statusType[index]) {
					that.reson = reson
				}
			},

			cancelOrder() {
				var that = this;
				if (that.reson) {
					util.post(api.OrderCancel, {
						orderId: that.orderId
					}).then(function(res) {
						if (res.errno == 0) {
							//console.log(res.data);
							// that.getOrderList();
							uni.navigateTo({
								url: '/pages/ucenter/order/order?status=' + that.orderInfo.status,
							})
						}
					});
				} else {
					uni.showToast({
						title: '请选择取消原因'
					})
				}
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						console.log('success');
					}
				});
			},
			updateAddress(e) {
				uni.navigateTo({
					url: '/pages/ucenter/orderAddress/address?order=' + this.orderId
				});
			},
			payTimer() {
				let that = this;
				let orderInfo = that.orderInfo;
				setInterval(() => {
					console.log(orderInfo);
					orderInfo.add_time -= 1;
					that.setData({
						orderInfo: orderInfo
					});
				}, 1000);
			},
			payOrder() {
				let that = this;
				util.request(api.PayPrepayId, {
					orderId: that.orderId || 15
				}).then(function(res) {
					if (res.errno == 0) {
						const payParam = res.data;
						uni.requestPayment({
							'timeStamp': payParam.timeStamp,
							'nonceStr': payParam.nonceStr,
							'package': payParam.packageName,
							'signType': payParam.signType,
							'paySign': payParam.paySign,
							'success': function(res) {
								console.log(res);
							},
							'fail': function(res) {
								console.log(res);
							}
						});
					}
				});
			},
			confirm: function() {
				util.post(api.OrderConfirm, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno == 0) {
						that.getOrderList();
					}
				});
			},
		}
	};
</script>
<style>
	
	page {
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.container {
		background: #f1f1f1;
	}

	.top {
		background-color: #353535;
		height: 200rpx;
		width: 100%;
		padding: 40rpx 30rpx 0 30rpx;
	}

	.status {
		display: flex;
	}

	.status .goingimg {
		height: 26rpx;
		width: 30rpx;
		margin-right: 20rpx;
		margin-top: 4rpx;
	}

	.status .buyimg {
		height: 31rpx;
		width: 31rpx;
		margin-right: 19rpx;
		margin-top: 4rpx;
	}

	.status .text .s {
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.status .text .t {
		font-size: 24rpx;
		color: #fff;
		margin-bottom: 38rpx;
	}

	.top2 {
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 12rpx;
		background: #fff;
		margin-top: -56rpx;
	}

	.top2 .item {
		padding: 40rpx 20rpx;
		display: flex;
	}

	.top2 .item .top2img {
		height: 29rpx;
		width: 24rpx;
		margin-right: 16rpx;
		margin-top: 2rpx;
	}

	.top2 .item .person {
		display: flex;
		color: #353535;
		font-size: 28rpx;
	}

	.top2 .item .t .s {
		color: #353535;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.top2 .item .t .time {
		font-size: 24rpx;
		color: #888888;
	}

	.address-bg {
		height: 10rpx;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.top2 .item .person .mobile {
		margin-left: 20rpx;
	}

	.address .b {
		color: #888888;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.goods-items {
		margin: 20rpx 30rpx;
		height: auto;
		overflow: hidden;
		background: #fff;
		padding: 30rpx 20rpx 0 20rpx;
		border-radius: 12rpx;
	}

	.goods-items .item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.goods-items .item.no-border {
		border-bottom: none;
	}

	.goods-items .item:last-child {
		border-bottom: none;
	}

	.goods-items .img {
		height: 145.83rpx;
		width: 145.83rpx;
		background-color: #f4f4f4;
		margin-right: 20rpx;
	}

	.goods-items .img image {
		height: 145.83rpx;
		width: 145.83rpx;
	}

	.goods-items .info {
		flex: 1;
		height: 145.83rpx;
		padding-top: 5rpx;
	}

	.goods-items .t {
		line-height: 33rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		font-size: 30rpx;
		color: #333;
	}

	.goods-items .t .name {
		display: block;
		float: left;
		max-width: 90%;
		/* overflow-wrap: break-word; */
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods-items .t .number {
		display: block;
		float: right;
		text-align: right;
	}

	.goods-items .m {
		height: 29rpx;
		overflow: hidden;
		line-height: 29rpx;
		margin-bottom: 25rpx;
		font-size: 25rpx;
		color: #666;
	}

	.goods-items .attr {
		background: #f1f1f1;
		border-radius: 4rpx;
		padding: 0 12rpx;
		font-size: 24rpx;
	}

	.goods-items .b {
		height: auto;
		overflow: hidden;
		font-size: 28rpx;
		color: #d73d21;
		margin-top: 40rpx;
	}

	.order-bottom {
		margin: 0 30rpx;
		padding: 30rpx 20rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.order-bottom .t {
		display: flex;
		justify-content: space-between;
		margin-bottom: 26rpx;
	}

	.order-bottom .t .label {
		color: #888888;
		font-size: 24rpx;
	}

	.order-bottom .t .txt {
		color: #353535;
		font-size: 24rpx;
	}

	.order-bottom .pay-fee {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-end;
	}

	.order-bottom .pay-fee .label {
		color: #353535;
		font-size: 24rpx;
	}

	.order-bottom .pay-fee .txt {
		color: #d73d2e;
		font-size: 24rpx;
	}

	.order-info {
		margin: 20rpx 20rpx;
		background: #fff;
		height: auto;
		overflow: hidden;
		padding: 0 20rpx 40rpx 20rpx;
		border-radius: 12rpx;
	}

	.order-info .item-a {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #353535;
	}

	.order-info .item-b {
		display: flex;
		margin-top: 26rpx;
		width: 100%;
	}

	.order-info .item-c {
		margin-top: 26rpx;
	}

	.order-info .item-b .one,
	.order-info .item-c .one {
		color: #888888;
		font-size: 24rpx;
	}

	.order-info .item-b .two,
	.order-info .item-c .two {
		margin-left: 40rpx;
		color: #353535;
		font-size: 24rpx;
	}

	.order-info .item-b .copyorderSn {
		color: #B28850;
		font-size: 24rpx;
		flex: 1;
		text-align: right;
	}
	.resons {
		padding: 40rpx 30rpx 10rpx 30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
	}
	
	.resons .text {
		font-size: 28rpx;
		color: #353535;
	}
	
	.concan {
		margin-top: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		background-color: #b28850;
		text-align: center;
	}
	
	.title {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
	}
	
	.title .txt {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
	}
	
	.title .img {
		margin-top: 28rpx;
		margin-right: 30rpx;
		height: 48rpx;
		width: 48rpx;
	}
	
	.doing {
		position: fixed;
		bottom: 0;
	}
	
	.doing .txt {
		padding-right: 50rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		background: #fff;
		display: flex;
		justify-content: flex-end;
	}
	
	.doing .txt .btn {
		margin-top: 22rpx;
		height: 56rpx;
		line-height: 56rpx;
		width: 140rpx;
		text-align: center;
		padding: 0 20rpx;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #353535;
		border: 2rpx solid #e5e5e5;
		margin-left: 20rpx;
	}
	
	.doing .txt .btn.l {
		color: #353535;
		border: 2rpx solid #e5e5e5;
	}
	
	.doing .txt .btn .t {
		color: #b28850;
		border: 2rpx solid #b28850;
	}
	
</style>
